import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { Col, Row, Button, Form, Input, Select, Cascader, Space } from 'antd';
import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
import { genderDict, educationDict, receiveDict } from '@/utils/dicts'
import { city } from '@/utils/city'
import { QueryUserType } from '@/api/user';

type SearchFormProps = {
  onSearch: (params: QueryUserType) => void
  onReset: (params: QueryUserType) => void
}

export type ExposeType = {
  formInfo: QueryUserType
}

const SearchForm = forwardRef<ExposeType, SearchFormProps>(({onSearch, onReset}, ref) => {
  const initialValues = {
    age: null,
    city: [],
    education: '',
    gender: '',
    receive: '',
    username: '',
  }
  const [form] = Form.useForm()

  const onFormLayoutChange = (opt: any) => {
    // console.log(opt)
  }

  const onResetForm = () => {
    form.resetFields()
    onReset(form.getFieldsValue())
  }

  const onSearchForm = () => {
    // console.log(formInfo)
    onSearch(form.getFieldsValue())
  }

  useImperativeHandle(ref, () => {
    return {
      formInfo: form.getFieldsValue()
    }
  })

  return (
    <>
      <Form
        layout='vertical'
        form={form}
        initialValues={initialValues}
        onValuesChange={onFormLayoutChange}
      >
        <Row gutter={20}>
          <Col className="gutter-row" span={8}>
            <Form.Item label="用户名" name="username">
              <Input placeholder="请输入用户名" />
            </Form.Item>
          </Col>

          <Col span={8}>
            <Form.Item name="gender" label="性别">
              <Select placeholder="请选择性别" allowClear>
                {
                  genderDict.map(item => {
                    return (
                      <Select.Option value={item.code} key={item.code}>
                        <div>
                          <span className='float-left'>{item.value}</span>
                          <span className='float-right'>{item.code}</span>
                        </div>
                      </Select.Option>
                    )
                  })
                }
              </Select>
            </Form.Item>
          </Col>

          <Col className="gutter-row" span={8}>
            <Form.Item label="年龄" name="age">
              <Input placeholder="请输入年龄" />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={20}>
          <Col span={8}>
            <Form.Item name="education" label="学历">
              <Select placeholder="请选择学历" allowClear>
                {
                  educationDict.sort((a, b) => b.order-a.order).map(item => {
                    return (
                      <Select.Option value={item.code} key={item.code}>
                        <div>
                          <span className='float-left'>{item.value}</span>
                          <span className='float-right'>{item.code}</span>
                        </div>
                      </Select.Option>
                    )
                  })
                }
              </Select>
            </Form.Item>
          </Col>

          <Col className="gutter-row" span={8}>
            <Form.Item label="收入范围" name="receive">
              <Select placeholder="请选择收入范围" allowClear>
                {
                  receiveDict.sort((a, b) => b.order-a.order).map(item => {
                    return (
                      <Select.Option value={item.code} key={item.code}>
                        <div>
                          <span className='float-left'>{item.value}</span>
                          <span className='float-right'>{item.code}</span>
                        </div>
                      </Select.Option>
                    )
                  })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col className="gutter-row" span={8}>
            <Form.Item label="所属地区" name="city">
              <Cascader options={city} placeholder="请选择地区" fieldNames={{label: 'name', value: 'code'}} allowClear />
            </Form.Item>
          </Col>
        </Row>
      </Form>

      <Space className='float-right'>
        <Button icon={<SyncOutlined />} onClick={onResetForm}>重 置</Button>
        <Button type='primary' icon={<SearchOutlined />} onClick={onSearchForm}>查 询</Button>
      </Space>
    </>
  );
});


export default SearchForm;